<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			/* 定义一个名为 [v-cloak] 的样式，用于在 Vue 初始化完成前隐藏元素 */
			[v-cloak] {
				display: none;
			}

			table {
				width: 620px;
				border: 1px solid red;
				text-align: center;
			}

			thead {
				background-color: cornflowerblue;
			}

			/* 定义一个弹出框的样式，包括绝对定位、位置、背景、大小和内边距 */
			#pop {
				position: absolute;
				left: 40%;
				top: 200px;
				z-index: 1999;
				background: rgba(0, 0, 0, .3);
				width: 380px;
				height: 100px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div id="app" class="container" v-cloak>
			<!-- 第一部分：创建新学生的输入区域 -->
			<h3>简易学生管理系统</h3>
			<div>
				<label for="username">用户名:</label>
				<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="newStudent.name">
			</div>
			<div>
				<label for="">年龄:</label>
				<input type="text" name="" id="" class="form-control" value="" placeholder="请输入年龄"
					v-model.number="newStudent.age" />
			</div>
			<div>
				<span>性别：</span>
				<select name="" id="" v-model="newStudent.sex" class="sel">
					<option value="男">男</option>
					<option value="女">女</option>
				</select>
			</div>
			<button @click="creatNewstudent()" class="btn btn-danger">创建新用户</button>

			<!-- 第二部分：学生信息展示和操作 -->
			<hr />
			<h3 class="h3 text-info">用户信息</h3>
			<button @click="avg" class="btn-sm">显示所有学生的平均年龄</button>
			<button @click="sortedStudents()" class="btn-sm">按升序显示所有学生的年龄</button>
			<table class="table table-bordered table-hover">
				<thead>
					<tr>
						<td>姓名</td>
						<td>年龄</td>
						<td>性别</td>
						<td>操作</td>
					</tr>
				</thead>
				<tbody>
					<!-- 使用 v-for 指令遍历 students 数组创建学生信息行 -->
					<tr v-for="(student,index) in students">
						<td>{{student.name}}</td>
						<td>{{student.age}}</td>
						<td>{{student.sex}}</td>
						<td>
							<button @click="changeStudent(index)" class="btn btn-success">修改</button>
							<button @click="deleteStudent(index)" class="btn btn-primary">删除</button>
						</td>
					</tr>
				</tbody>
			</table>
			按姓名搜索：<input type="text" v-model="search" />
			<button @click="filteredStudents()" class="btn btn-primary">搜索</button>
			<!-- 弹出框用于修改学生姓名 -->
			<div id="pop" v-show="popshow">
				姓名：<input type="text" name="" id="" value="" v-model="changestu" />
				<button type="button" @click="changed()">修改</button>
				<button type="button" @click="closed()">关闭</button>
			</div>
		</div>
		<script src="../js/vue.js"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app", // 指定 Vue 实例挂载的元素
				data: { // 定义数据
					students: [ // 学生数组
						{
							name: "张三",
							age: 20,
							sex: "男"
						},
						{
							name: "李四",
							age: 22,
							sex: "男"
						},
						{
							name: "王五",
							age: 21,
							sex: "女"
						},
						{
							name: "赵四",
							age: 20,
							sex: "女"
						},
					],
					newStudent: {
						name: "",
						age: 0,
						sex: "男"
					}, // 新学生的初始数据
					search: "", // 搜索输入框的值
					popshow: false, // 控制弹出框显示与否
					changestu: 'ddd', // 修改学生姓名的输入值
					changeindex: 0 // 记录要修改的学生索引
				},
				methods: { // 定义方法
					creatNewstudent() { // 创建新学生的方法
						// 姓名不能为空的校验
						if (this.newStudent.name === "") {
							alert("姓名不能为空");
							return;
						}
						// 年龄不能小于 10 的校验
						if (this.newStudent.age < 10) {
							alert("年龄不能小于 10");
							return;
						}
						// 往 students 数组头部添加新学生数据
						this.students.unshift(this.newStudent);
						// 清空新学生输入的数据
						this.newStudent = {
							name: "",
							age: 0,
							sex: "男"
						}
					},
					// 删除指定索引的学生记录
					deleteStudent(index) {
						this.students.splice(index, 1);
					},
					filteredStudents() { // 按姓名搜索的方法
						search = this.search;
						// 使用 filter 方法根据姓名匹配筛选学生数据
						vm.students = this.students.filter(function(item) {
							return item.name.match(search);
						});
					},
					sortedStudents() { // 按年龄升序排序学生数据的方法
						this.students.sort(function(a, b) {
							return a.age - b.age;
						})
					},
					avg() { // 计算并显示学生平均年龄的方法
						alert('平均年龄为：' + this.sum / this.students.length);
					},
					changeStudent(index) { // 显示修改学生姓名弹出框的方法
						this.popshow = true;
						this.changestu = this.students[index].name
						// 记录要修改的学生索引
						this.changeindex = index
					},
					changed() { // 确认修改学生姓名的方法
						this.students[this.changeindex].name = this.changestu
						alert('修改成功！')
						this.popshow = false
					},
					closed() { // 关闭弹出框的方法
						this.popshow = false
					}
				},
				computed: { // 计算属性
					sum() { // 计算学生年龄总和
						var sum = 0;
						for (var i = 0; i < this.students.length; i++) {
							sum += this.students[i].age;
						}
						return sum;
					}
				}
			})
		</script>
	</body>
</html>